<template>
   <common-card title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <span>日同比 </span>
      <span class="emphasis"> {{numberFormat(userGrowthLastDay)}}% &nbsp;</span>
      <span class="increment"></span>
      <span>&nbsp; 月同比 </span>
      <span class="emphasis"> {{numberFormat(userGrowthLastMonth)}}% </span>
      <span class="decrement"></span>
    </template>
   </common-card>
</template>

<script lang="ts">

export default {
  name: "TotalUsers",
 
};
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import { ref, onMounted,computed } from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

//累计用户数
const usersTotal = computed(()=>reportDataStore.reportData.usersTotal)
//上月用户数量
const usersLastMonth= computed(()=>reportDataStore.reportData.usersLastMonth)
//日同比
const userGrowthLastDay = computed(()=>reportDataStore.reportData.userGrowthLastDay)
//月同比
const userGrowthLastMonth = computed(()=>reportDataStore.reportData. userGrowthLastMonth )

const barChartRef = ref()
let barChart: EChartsType

const getOption=()=>{
  return{
    xAxis:{
      show: false,
      min:0,
      max: 100
    },
    yAxis:{
      show:false,
      data:['aaa']
    },
    series:{
      type:'bar',
      data:[78],
      barWidth: 10,
      showBackground: true,
      itemStyle:{
        color:'orangered'
      }

    },
    grid:{
      left:0,
      right:0
    },
    tooltip:{
       trigger: 'axis'
    },
    label:{
      show: true,
      formatter: '|',
      color: 'orangered',
      position: 'right'
    }
  }
}

onMounted(()=>{
  barChart = echarts.init(barChartRef.value)
  barChart.setOption(getOption())

  window.addEventListener('resize', () => {
    barChart.resize()
  })
})
</script>

<style scoped></style>